<template>
  <el-dialog
    title="选择商品"
    :visible.sync="dialogVisibleShop"
    :before-close="handleClose"
    width="60%"
  >
    <!-- <div class='shopConditions'>
      <div style='margin-bottom:20px;'>
        搜索商品名称&emsp;
        <el-input v-model='searchs'
                  size='small'
                  style='width: 324px;'></el-input>&emsp;
        <el-button type='primary'
                   size='small'
                   @click='searchTag("ss")'>搜索</el-button>
        <el-button size='small'
                   @click='getList'>取消</el-button>
      </div>
      <div>
        查询商品分类&emsp;
        <el-select v-model='searchOne'
                   size='small'
                   class='form-min-input'
                   placeholder='请选择'
                   @change='selectOneTag'>
          <el-option v-for='item in oneArr'
                     :key='item.type_id'
                     :label='item.type_name'
                     :value='item.type_id'>
          </el-option>
        </el-select>
        <el-select v-model='searchTwo'
                   size='small'
                   class='form-min-input'
                   placeholder='请选择'>
          <el-option v-for='item in twoArr'
                     :key='item.type_id'
                     :label='item.type_name'
                     :value='item.type_id'>
          </el-option>
        </el-select>&emsp;
        <el-button type='primary'
                   size='small'
                   @click='searchTag("cx")'>查询</el-button>
      </div>
    </div> -->
    <div class="shopList">
      <el-tabs
        v-model="activeName"
        style="width: 156px; margin: 10px 0 0 20px;"
        @tab-click="handleClick"
      >
        <el-tab-pane label="普通商品" name="exclusive"></el-tab-pane>
        <el-tab-pane label="会员商品" name="vip"></el-tab-pane>
      </el-tabs>
      <div class="shopList-box">
        <div
          v-for="(item, index) in shopList"
          :key="index"
          :style="item.check ? 'border-color:#409EFF' : ''"
          class="shopList-chlid"
          @click.stop="shopTap(item)"
        >
          <div class="shopList-chlid-img">
            <img
              :src="
                $store.state.qiniu +
                  item.goods_cover.split(',')[0] +
                  $store.state.imgRotate
              "
              width="100%"
              height="100%"
            />
          </div>
          <div class="shopList-chlid-font">
            <div class="one">
              {{ item.goods_name }}
            </div>
            <div class="two">
              <span v-if="item.low_goods_price == item.up_goods_price"
                >￥{{ item.low_goods_price }}</span
              >
              <span v-else
                >￥{{ item.low_goods_price }} - ￥{{
                  item.up_goods_price
                }}</span
              >
            </div>
          </div>
        </div>
      </div>
      <el-pagination
        :page-size="12"
        layout="prev, pager, next"
        :total="totals"
        style="margin-top:20px;text-align: center;"
        @current-change="changes"
      >
      </el-pagination>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click.stop="shopSumbit">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { GOODSLIST } from "@/service/shop";
// GETLIST
var _ = require("lodash");
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dataJson: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dialogVisibleShop: false,
      totals: 0,
      pages: 1,
      shopList: [],
      // searchs: '',
      // searchOne: '',
      // searchTwo: '',
      // oneArr: [],
      // twoArr: [],
      // searchsName: '',
      shopDataList: [],
      activeName: "exclusive"
    };
  },
  watch: {
    dialogVisible(v) {
      this.dialogVisibleShop = v;
      if (v) {
        this.shopDataList = this.dataJson.shopDataList
          ? _.cloneDeep(this.dataJson.shopDataList)
          : [];
        this.getList();
      }
    }
  },
  methods: {
    // selectOneTag (item) {
    //   this.searchTwo = ''
    //   this.oneArr.forEach(ele => {
    //     if (ele.type_id === item) {
    //       this.twoArr = ele.second
    //     }
    //   })
    // },
    shopTap(e) {
      e.check = !e.check;
      if (e.check) {
        if (this.shopDataList.length < 10) {
          this.shopDataList.push(e);
        } else {
          e.check = !e.check;
          this.$message.error("最多只能选10种");
        }
      } else {
        let arr = this.shopDataList;
        arr.forEach((ele, idx) => {
          if (ele.goods_id === e.goods_id) {
            arr.splice(idx, 1);
          }
        });
      }
    },
    shopSumbit() {
      let arr = _.cloneDeep(this.shopDataList);
      this.shopDataList.forEach(ele => {
        arr.push(ele);
      });
      arr = this.unique(arr);
      this.$emit("close", arr);
      this.dialogVisibleShop = false;
    },
    unique(arr) {
      let resA = {};
      let resB = [];
      arr.forEach(ele => {
        resA[ele.goods_id] = ele;
      });
      for (let key in resA) {
        resB.push(resA[key]);
      }
      return resB;
    },
    handleClose() {
      this.dialogVisibleShop = false;
      this.$emit("close");
    },
    handleClick() {
      this.getList();
    },
    async changes(page) {
      this.pages = page;
      this.getList();
      // if (this.searchOne !== '' || this.searchTwo !== '' || this.searchs !== '') {
      //   let param = {
      //     flag: 'exclusive',
      //     page: this.pages,
      //     pageshow: 12
      //   }
      //   if (this.searchsName === 'ss') {
      //     this.searchOne = ''
      //     this.searchTwo = ''
      //     param.goods_name = this.searchs
      //   } else {
      //     this.searchs = ''
      //     param.goods_type = this.searchTwo || this.searchOne
      //   }
      //   await GOODSLIST(param).then(res => {
      //     let { code, data, msg } = res
      //     if (code === 200) {
      //       this.totals = data.length
      //       this.shopList = data.list
      //     } else {
      //       this.$message.error(msg)
      //       this.shopList = []
      //     }
      //   })
      // } else {
      // this.getList()
      // }
    },
    // async searchTag (name) {
    //   this.searchsName = name
    //   this.pages = 1
    //   let param = {
    //     flag: 'exclusive',
    //     pages: this.pages,
    //     pageshow: 12
    //   }
    //   let soft
    //   if (name === 'ss') {
    //     this.searchOne = ''
    //     this.searchTwo = ''
    //     param.goods_name = this.searchs
    //     if (this.searchs !== '') {
    //       soft = true
    //     }
    //   } else {
    //     this.searchs = ''
    //     param.goods_type = this.searchTwo || this.searchOne
    //     if (this.searchOne !== '' || this.searchTwo !== '') {
    //       soft = true
    //     }
    //   }
    //   if (soft) {
    //     await GOODSLIST(param).then(res => {
    //       let { code, data, msg } = res
    //       if (code === 200) {
    //         this.totals = data.length
    //         this.shopList = data.list
    //       } else {
    //         this.$message.error(msg)
    //         this.shopList = []
    //       }
    //     })
    //   }
    // },
    async getList() {
      // this.shopList = []
      // this.searchs = ''
      // this.searchOne = ''
      // this.searchTwo = ''
      await GOODSLIST({
        flag: this.activeName,
        page: this.pages,
        pageshow: 12
      }).then(({ code, data }) => {
        if (code === 200) {
          let arr;
          data.list.forEach(e => {
            e.check = false;
            e.goods_cover = e.goods_cover.split(",")[0];
            arr = this.shopDataList;
            if (arr) {
              arr.forEach(ele => {
                if (ele.goods_id === e.goods_id) {
                  e.check = true;
                }
              });
            }
          });
          this.totals = data.length;
          this.shopList = data.list;
        }
      });
      // await GETLIST().then(res => {
      //   let { code, data } = res
      //   if (code === 200) {
      //     this.oneArr = data
      //   }
      // })
    }
  }
};
</script>
<style lang="scss" scoped>
// .shopConditions {
//   width: 100%;
//   height: 140px;
//   border-radius: 10px 10px 0 0;
//   border: 10px solid #f2f2f2;
//   padding: 20px 0 0 20px;
// }
.shopList {
  // width: 100%;
  height: 450px;
  // border-radius: 0 0 10px 10px;
  border-radius: 10px;
  border: 10px solid #f2f2f2;
  // margin-top: -10px;

  .shopList-box {
    display: flex;
    flex-wrap: wrap;
    padding-left: 10px;
    height: 300px;
    .shopList-chlid {
      width: 22%;
      height: 90px;
      background: #ffffff;
      border: 1px solid #e2e2e2;
      border-radius: 10px;
      margin: 10px 10px 0 0;
      padding: 10px 0 0 10px;
      .shopList-chlid-img {
        width: 70px;
        height: 70px;
        overflow: hidden;
        border-radius: 10px;
        float: left;
      }
      .shopList-chlid-font {
        width: 50%;
        height: 70px;
        float: left;
        margin-left: 10px;
        overflow: hidden;
        .one {
          width: 100%;
          height: 38px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
        .two {
          width: 100%;
          height: 26px;
          line-height: 26px;
          color: #ff2525;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
